<template>
  <div id="app">
    <button @click="changeIsShow">显示或者隐藏input</button>
    <input type="text" v-if="isShow" ref="input">
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      isShow:false
    }
  },
methods:{
  changeIsShow(){
    this.isShow=!this.isShow
    // this.$refs.input.focus() 无效
    /*setTimeout(()=>{
      this.$refs.input.focus()
    },0)*/
    /*
    vm.$nextTick( [callback] )
    参数：{Function} [callback]
    用法：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
    */
    this.$nextTick(()=>{
      //DOM更新后立马执行
      this.$refs.input.focus()
    })
  }
}
}
</script>
<style lang="less"></style>
